<script setup>
import { reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useIuserInfoStore } from '@T2/store/users.ts';
import { unitById } from '@T2/service/api.ts';
import dayjs from 'dayjs';

const iuserInfoStore = useIuserInfoStore();
const { info } = iuserInfoStore;

const props = defineProps({
  units: {
    type: Array,
    required: true,
  }
});
const emits = defineEmits(['unitChange'])

/* 数量统计 */
const sysNums = computed(() => {
  let alarm = 0, offline = 0, cares = 0;
  props.units.forEach(item => {
    item.warn_number && alarm++;
    item.offline && offline++;
    item.users.includes(info.id) && cares++;
  });
  const [unit0] = props.units;
  const [group0, group1] = unit0?._sensors || [];
  const title = group1?.c || [];
  return {alarm, offline, cares, title};
});


/* tab切换 */
const tabResd = reactive({
  curDex: 1,
});
const tabsClick = (node) => {
  tabResd.curDex = node;
  if (node === 1) {
    props.units.forEach(item => {
      item.hide = false;
    });
  } else if (node === 2) {
    props.units.forEach(item => {
      item.hide = true;
      if (item.warn_number) {
        item.hide = false;
      }
    });
  } else if (node === 3) {
    props.units.forEach(item => {
      item.hide = false;
      if (!item.offline) {
        item.hide = true;
      }
    });
  } else if (node === 4) {
    props.units.forEach(item => {
      item.hide = true;
      if (item.users.includes(info.id)) {
        item.hide = false;
      }
    });
  }
}

const Resd = reactive({
  opened: true,
  current: null,
});

const handleCares = (item) => {
  const flag = item.users.includes(info.id);
  if (flag) {
    item.users = item.users.filter(j => j !== info.id);
  } else {
    item.users.push(info.id)
  }
  unitById({
    method: 'patch',
    id: item.id,
    data: {
      users: item.users,
    }
  }).then(res => {
    ElMessage.success(`${ flag ? '取关' : '关注'}成功！`);
  });
}

const handleUnitClick = (item) => {
  if (Resd.current?.id === item.id) {
    return;
  }
  Resd.current = { ...item };
  emits('unitChange', item);
}
</script>

<template>
  <div class="asideBox" :class="{'open-data': Resd.opened}">
    
    <div class="line-box flex-end pointer">
      <div class="line flex-center-center" @click="Resd.opened = !Resd.opened">
        <el-icon color="#fff" v-if="Resd.opened"><ArrowRight /></el-icon>
        <el-icon color="#fff" v-else><ArrowLeft /></el-icon>
      </div>
    </div>
    
    <div class="content-box flex-column">
      <label>实时数据</label>
      <img :src="require('@T2/assets/hr/line1.png')" />
      <div class="card flex-sb-center">
        <div class="data flex-sb-center flex-column" @click="tabsClick(1)">
          <div class="nums" style="color: #4D92F5">{{ props.units.length }}</div>
          <div class="name" :class="{'isActive': tabResd.curDex === 1}">全部</div>
        </div>
        <div class="data flex-sb-center flex-column" @click="tabsClick(2)">
          <div class="nums" style="color: #F54D4D">{{ sysNums.alarm }}</div>
          <div class="name" :class="{'isActive': tabResd.curDex === 2}">异常</div>
        </div>
        <div class="data flex-sb-center flex-column" @click="tabsClick(3)">
          <div class="nums" style="color: #505050">{{ sysNums.offline }}</div>
          <div class="name" :class="{'isActive': tabResd.curDex === 3}">离线</div>
        </div>
        <div class="data flex-sb-center flex-column" @click="tabsClick(4)">
          <div class="nums" style="color: #FFCE00">{{ sysNums.cares }}</div>
          <div class="name" :class="{'isActive': tabResd.curDex === 4}">关注</div>
        </div>
      </div>
      
      <div class="data-line header flex">
        <div class="unit-name">检测点名称</div>
        <div class="data-value">
          <span v-for="item in sysNums.title.slice(0, 3)">{{ item.n }}</span>
        </div>
        <div class="time">上传时间</div>
      </div>
      
      <div class="data-container flex-column scroller-aside">
        <div
          v-for="item in props.units"
          v-show="!item.hide"
          class="data-line flex--center pointer"
          :class="{ 'isActive': Resd.current?.id === item.id }"
          @click="handleUnitClick(item)"
        >
          <img
            :src="item.users.includes(info.id) ? require('@T2/assets/common/cares-yes.png') : require('@T2/assets/common/cares-no.png')"
            @click="handleCares(item)"
          />
          <div class="unit-name ellipsis">{{ item.name }}{{ item.name }}{{ item.name }}</div>
          <template v-if="item._sensors?.length > 1">
            <div class="data-value">
              <span v-for="sensor in (item._sensors[1].c?.slice(0, 3) || [])">{{ sensor.value !== '掉线' ? sensor.value : '--'}}</span>
            </div>
            <div class="time">{{ dayjs(item._sensors[1].c[0].timestamp).format('MM-DD HH:mm') }}</div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.asideBox {
  position: absolute;
  right: -477px;
  top: 50%;
  transform: translateY(-50%);
  width: 477px;
  height: 80%;
  background: #FFFFFF;
  border-radius: 6px 0px 0px 3px;
  transition: right 0.5s;
  z-index: 10;
}
.open-data {
  right: 0;
}
.line-box {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  height: 90px;
  width: 30px;
  .line {
    height: 100%;
    width: 18px;
    background-color: #4D92F5;
    border-radius: 2px 0px 0px 2px;
  }
}
.content-box {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  label {
    padding-left: 8px;
    font-weight: 500;
    font-size: 20px;
    color: #000000;
    line-height: 23px;
    padding: 18px 8px 0;
  }
  >img {
    margin: 14px 7px 0 0;
    width: calc(100% - 7px);
    height: 7px;
  }
}
.card {
  margin: 25px 22px 15px;
  width: calc(100% - 60px);
  height: 66px;
  background: #FFFFFF;
  box-shadow: 0px 4px 4px 4px rgba(0,0,0,0.05);
  border-radius: 3px;
  .data {
    width: 25%;
    height: 100%;
    padding-top: 5px;
    cursor: pointer;
    .nums {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 24px;
      line-height: 28px;
    }
    .name {
      height: 25px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 12px;
      color: #ABABAB;
      line-height: 14px;
      position: relative;
    }
    .isActive {
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 45px;
        height: 4px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #4D92F5;
      }
    }
  }
}
.data-line {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #111111;
  height: 44px;
  line-height: 44px;
  &.isActive,
  &:hover {
    background-color: #F4F9FF;
  }
  &.header .unit-name {
    width: 106px;
    text-align: center;
  }
  img {
    width: 15px;
    height: 15px;
    margin-right: 6px;
  }
  .unit-name {
    width: 85px;
    padding-right: 6px;
  }
  .time {
    width: 82px;
  }
  .data-value {
    flex: 1;
    span {
      display: inline-block;
      width: calc(100%/3);
    }
  }
}
.data-container {
  flex: 1;
  overflow-x: hidden;
  overflow-y: overlay;
  .unit-name,
  .time {
    color: #666666;
  }
}
</style>

